import React , {useState , useEffect, useRef} from 'react'
import '../../search_index_scss/index.css'


//umi 仓库 dva
import { IndexModelState, ConnectProps, Loading, connect } from 'umi';


//删除按钮组件的引入
import { Button, Popover } from 'antd';


// //表格
// import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
// import { Avatar, List, Space } from 'antd';

// //表格二
// import {  Table } from 'antd';


type Props = {}

const Index = (props: any) => {


  const {dispatch,list} = props
  console.log(list);


  useEffect(()=>{
        dispatch({
          type:'distchlist/getlist'
        })
  },[])


      //定义搜索输入的内容
      const inp1:any = useRef('')
      const inp2:any = useRef('')



  //显示隐藏的删除按钮
  const [ btnflag , setbtnflag ] = useState(false)

  //点击气泡出来之后的删除按钮
  let shan = ()=>{
    console.log(1);
    setzhezi(true)

    setTimeout(()=>{
        setzhezi(false)
    },3000)

    setcheck(false)
    setbtnflag(false)

}

//气泡里面的内容
  const content = (
    <div style={{cursor:'pointer'}}>
      <span onClick={shan}>删除</span>&emsp;&emsp;
      <span>取消</span>
    </div>
  );


  let shan2 = ()=>{
    console.log(1);

}








  //最顶部盒子的位置变化
  const [ zhezi , setzhezi ] = useState(false)

  //inp的全部checked
  const [ check , setcheck ] = useState(false)


      //共享删除按钮的隐藏 -- 显示2
    let btnflag_true = (e:any)=>{
      // setbtnflag()
      console.log(e.target.checked);
      let variable = e.target.checked
          setbtnflag(variable)
          setcheck(variable)
    }

    //点击删除按钮触发的事件
    let search_yi = ()=>{
            console.log(2);

    }


    //点击数据里面的删除
    let search_delete = (item:any)=>{
            console.log(item.id);
        // alert(item.id)

          dispatch({
            type:'distchlist/deletelist',
            payload:item.id
          })
                window.location.reload()
    }

    //inp监控
    let bian = ()=>{
      console.log('变了');

    }



    //搜索
    let search_sou = ()=>{
          console.log(inp1.current.value,inp2.current.value);
          dispatch({
            type:'distchlist/searchsou',
            payload:{
              in1:inp1.current.value,
              in2:inp2.current.value
            }
          })

    }









  return (
    <div>

          <div className={ zhezi ? 'zuiding' : 'zuiding2' }><span>!</span> 访客无权进行该操作</div>



          <h3 className='search_header'>
            <span>工作台/</span>搜索记录
          </h3>


          {/* 头部的搜索 */}
          <div className="search_sou">

                    <div className="search_ul1">
                                   <ul>
                                        <li>类型：<input type="text" placeholder='请输入搜索类型'/></li>
                                        <li>搜索词：<input type="text" placeholder='请输入搜索词' ref={inp1}  /></li>
                                        <li>搜索量：<input type="text" placeholder='请输入搜索量'  ref={inp2} /></li>
                                   </ul>

                                    <span className='serch_span2'>重置</span>
                                    <span className='serch_span1' onClick={search_sou}>搜索</span>
                    </div>
          </div>



      {/* 内容盒子 */}
      <div className="search_data">
              <ul className='search_data_ul1'>
                  {
                    btnflag ?


                      <Popover content={content} title="请选择你的操作" className='search_data_span' >
                    <Button type="primary">删除</Button>
                  </Popover>    : ''
                  }

                <li><input type="checkbox" onChange={btnflag_true}  /> &emsp;搜索词</li>
                <li>搜索量</li>
                <li>搜索时间</li>
                <li>操作</li>
              </ul>



                    {/* 接口内容 -- 渲染 */}


                   <ul className='ul22'>
                              {
                                   list[0] &&  list[0].map((item:any,index:number)=>{
                                                        return <li key={index}>
                                                              <span><input type="checkbox"  checked={check} onChange={bian}/> &ensp; {item.keyword? item.keyword : '2'}</span>
                                                              <span className='data_lv'>{item.count} </span>
                                                              <span>{item.updateAt} </span>
                                                              <span className='data_lan' onClick={()=>{search_delete(item)}}>删除</span>
                                          </li>
                                      })
                                }
                   </ul>











      </div>


    </div>
  )
}

export default connect(({distchlist}:any)=>distchlist)(Index);
